<script lang='ts' setup>
import { ref, watch } from 'vue'
import type { PropType } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'

const props = defineProps({
  permissionRoutes: {
    type: Array as PropType<RouteRecordRaw[]>,
    default: () => [],
  },
  mode: {
    type: String,
    default: 'horizontal',
  },
})

const route = useRoute()
const router = useRouter()
const selectedKeysMap: any = {}
const openKeysMap: any = {}
const menuData: RouteRecordRaw[] = getMenuData(props.permissionRoutes, [])
console.log('🚀 ~ menuData:', menuData)
const selectedKeys = ref<string[]>(selectedKeysMap[route.meta?.activeMenu || route.path])
const openKeys = ref<string[]>(openKeysMap[route.path])
const currentOpenKeys = ref([''])

function onClickMenu({ item, key }: any) {
  router.push({
    path: key || item.index,
    query: route.query,
  })
}

watch(
  () => route.path,
  (val) => {
    // 如果有手动配置的高亮菜单先用手动配置的，否则就是当前菜单高亮
    const activeMenu = route.meta?.activeMenu
    selectedKeys.value = selectedKeysMap[activeMenu || val]
    openKeys.value = openKeysMap[val]
    // 如果是水平菜单，则不打开父菜单
    currentOpenKeys.value = props.mode === 'horizontal' ? [''] : openKeys.value
  },
)

// 过滤路由菜单(过滤掉隐藏的或者没有name的菜单)
function getMenuData(routes: RouteRecordRaw[] = [], parentKeys: string[] = []): any {
  const menuData = []
  for (const item of routes) {
    openKeysMap[item.path] = parentKeys
    selectedKeysMap[item.path] = [item.path]
    if (item.name && !item.hideInMenu) {
      const newItem = { ...item }
      if (item.children?.length)
        newItem.children = getMenuData(item.children, [...parentKeys, item.path])

      menuData.push(newItem)
    }
    else if (item.children && !item.name && !item.hideInMenu) {
      menuData.push(...getMenuData(item.children, [...parentKeys, item.path]))
    }
  }
  return menuData
}
</script>

<template>
  <a-menu
    v-model:selected-keys="selectedKeys"
    v-model:open-keys="currentOpenKeys"
    v-bind="$attrs"
    :mode="mode"
    theme="dark"
    class="side-menu-container"
    @click="onClickMenu"
  >
    <template v-for="(item) in menuData" :key="item.name">
      <a-menu-item v-if="!item.children || !item.children.length" :key="item.path">
        <component :is="item.meta?.icon" v-if="item.meta?.icon" class="icon" />
        <span class="menuname">{{ item.name }}</span>
      </a-menu-item>
      <a-sub-menu v-if="item.children && item.children.length" :key="item.path">
        <template #title>
          <component :is="item.meta?.icon" v-if="item.meta?.icon" class="icon" />
          <span class="menuname">{{ item.name }}</span>
        </template>
        <a-menu-item v-for="(item1) in item.children" :key="item1.path">
          <component :is="item1.meta?.icon" v-if="item1.meta?.icon" class="icon" />
          <span class="menuname">{{ item1.name }}</span>
        </a-menu-item>
      </a-sub-menu>
    </template>
  </a-menu>
</template>

<style lang='less' scoped>
@import './style.less';
</style>
